<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true">
      <template #left>
        <view class="locate">郑州<text class="icon-down"></text></view>
      </template>
      <template #default>
        <view class="title">优快驾考通</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">优快驾考通</view>
      </view>
    </view>
    <!-- #endif -->
    <!--可通过设置bar-animate-mode="worm"开启毛毛虫模式  -->
    <z-tabs ref="tabs" :current="swiperCurrent" :list="learnBaseTypes" value-key="code" bar-animate-mode="worm"
      :tabs-style="{ height: '88rpx' }" :active-style="{ 'font-size': '34rpx', color: '#000' }"
      :inactive-style="{ 'font-size': '30rpx', color: '#7f7f7f' }" :bar-style="{ background: '#5cbc85' }"
      bar-height="6rpx" bar-width="36rpx" @change="tabsChange"> </z-tabs>
    <!-- swiper -->
    <swiper class="swiper" :current="swiperCurrent" @transition="swiperTransition"
      @animationfinish="swiperAnimationfinish">
      <swiper-item>
        <!-- 理考科目一 -->
        <TheoryExam base-type="km1" :banner-list="homeData.homeBanners?.filter(item => item.baseType == 'km1') || []">
        </TheoryExam>
      </swiper-item>
      <swiper-item>
        <Km2Exam base-type="km2" :banner-list="homeData.homeBanners?.filter(item => item.baseType == 'km2') || []"
          :homeIconList="homeData.homeIcons?.filter(item => item.baseType == 'km2') || []">
        </Km2Exam>
      </swiper-item>
      <swiper-item>
        <Km3Exam base-type="km3" :banner-list="homeData.homeBanners?.filter(item => item.baseType == 'km3') || []"
          :homeIconList="homeData.homeIcons?.filter(item => item.baseType == 'km3') || []">
        </Km3Exam>
      </swiper-item>
      <!-- 理考科目四 -->
      <swiper-item>
        <TheoryExam base-type="km4" :banner-list="homeData.homeBanners?.filter(item => item.baseType == 'km4') || []">
        </TheoryExam>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts" setup>
  import { ref, watch, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import type { HomeDataVo } from '@/api/home/types'
  import { useLearnBaseTypes, useBaseInfo } from '@/composables/LearnBase'

  import { getHomeDataApi } from '@/api/home'

  import zTabs from '@/components/z-tabs/z-tabs.vue'
  import TheoryExam from './components/TheoryExam.vue'
  import Km2Exam from './components/Km2Exam.vue'
  import Km3Exam from './components/Km3Exam.vue'


  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif

  /* 学习题库的考试科目 */
  const { learnBaseTypes } = useLearnBaseTypes()
  const tabs = ref<any>(null)
  const swiperCurrent = ref<number>(0)

  // 题库信息
  const baseInfo = computed(() => useBaseInfo())
  // 主页数据
  const homeData = ref<HomeDataVo>({})

  // 请求接口获取主页数据
  const getHomeData = async () => {
    if (baseInfo.value) {
      let homeDataResult = await getHomeDataApi(baseInfo.value.driveType!, baseInfo.value.examReason!)
      homeData.value = homeDataResult.data
    }
    else {
      homeData.value = {}
    }
  }

  onLoad(async () => {
    // await getHomeData()
  })

  watch(() => baseInfo.value, async () => {
    if (baseInfo.value) {
      await getHomeData()
    }
  }, {
    immediate: true
  })

  // tabs通知swiper切换
  const tabsChange = (index: number, value: string) => {
    swiperCurrent.value = index
  }
  // swiper滑动中
  const swiperTransition = (e: any) => {
    tabs.value?.setDx(e.detail.dx)
  }
  // swiper滑动结束
  const swiperAnimationfinish = (e: any) => {
    swiperCurrent.value = e.detail.current
    tabs.value?.unlockDx(e.detail.dx)
  }

</script>

<style lang="scss">

  // 自定义导航样式
  .uni-nav-bar {
    .locate {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #7f7f7f;
    }

    .title {
      flex: 1;
      align-self: center;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      opacity: 1;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 32rpx;
      }
    }
  }

  /* #endif */
</style>
